import * as React from "react";
import * as ReactDOM from "react-dom";

import "./CustomerGetAgentLevel.less";
import NavBar from "../Components/NavBar/NavBar";


export interface CustomerGetAgentLevelProps {

}

export interface State {
    CustomerList: any
}

export default class CustomerGetAgentLevel extends React.Component<CustomerGetAgentLevelProps, State> {
    //默认属性
    static readonly defaultProps: CustomerGetAgentLevelProps = {};

    constructor(props: CustomerGetAgentLevelProps) {
        super(props);
        //默认状态
        this.state = {
            CustomerList: [
                {
                    id: 'ss154',
                    name: '省级代理商',
                    DirectPeople: 1,
                    AllPeople: 2
                },
                {
                    id: 'sa5485',
                    name: '市级代理商',
                    DirectPeople: 1,
                    AllPeople: 12
                }
            ]
        };
    }

    //组件挂载后回调
    componentDidMount() {
        document.title = "";

    }

    render() {
        return <div className="CustomerGetAgentLevel">
            <NavBar title={'级别列表'}/>
            <div className="tips">
                <span style={{color: 'red'}}>红色</span>是每个级别的直属人数,
                <span style={{color: 'green'}}>绿色 </span>是每个级别的下属所有人数
            </div>
            <div className="weui-cells">
                <div className="weui-cell">
                    <div className="weui-cell__bd">
                        <p>植物精油</p>
                    </div>
                    <div className="weui-cell__ft" onClick={() => {
                        location.hash = '#/check-next-agent'
                    }}>
                        <i className="iconfont icon-caidan"/>
                        代理树
                    </div>
                </div>
                {this.state.CustomerList.map((it) => {
                    return <a className="weui-cell weui-cell_access" href="javascript:;"
                              onClick={() => {
                                  location.hash = `#/customer-get-customer-list?&id=${it.id}&name=${it.name}`;
                              }}>
                        <div className="weui-cell__bd">
                            <p>{it.name}</p>
                        </div>
                        <div className="weui-cell__ft">
                            <div className={'people'}>
                                <span className={'direct'}>{it.DirectPeople}</span>
                                |
                                <span className={'all'}>{it.AllPeople}</span>
                            </div>
                        </div>
                    </a>
                })}

            </div>
        </div>
    }
}
